<template>
  <div class="container">
    <!-- 首页内容 -->
    <div v-if="currentPage === 'home'">
      <!-- 头部导航 -->
      <div class="header">
        <div class="logo">校园跑腿</div>
        <div class="user-avatar" @click="switchToUserCenter">
          <i class="fas fa-user"></i>
        </div>
      </div>
      
      <!-- 任务发布按钮 -->
      <button class="create-task-btn" @click="showTaskForm">
        <i class="fas fa-plus-circle"></i>
        发表跑腿信息
      </button>
      
      <!-- 任务类型选择 -->
      <div class="task-types">
        <div 
          v-for="type in [
            { value: 0, icon: 'fa-box', label: '取送件' },
            { value: 1, icon: 'fa-shopping-bag', label: '代购' },
            { value: 2, icon: 'fa-tasks', label: '待办事' }
          ]" 
          :key="type.value"
          class="task-type"
          :class="{ active: taskForm.data.taskType === type.value }"
          @click="taskForm.data.taskType = type.value"
        >
          <i :class="['fas', type.icon]"></i>
          <div>{{ type.label }}</div>
        </div>
      </div>
      
      <!-- 任务表单 -->
      <transition name="slide-up">
        <div class="task-form" v-if="taskForm.visible">
          <div class="form-group">
            <label for="taskTitle">任务标题</label>
            <input 
              type="text" 
              id="taskTitle" 
              placeholder="例如：取快递、代买午餐等"
              v-model="taskForm.data.taskTitle"
            >
          </div>
          
          <div class="form-group">
            <label for="taskDesc">任务描述</label>
            <textarea 
              id="taskDesc" 
              placeholder="请详细描述任务要求..."
              v-model="taskForm.data.taskDesc"
            ></textarea>
          </div>
          
          <div class="form-group">
            <label for="reward">任务报酬 (元)</label>
            <input 
              type="number" 
              id="reward" 
              placeholder="0.00" 
              step="0.01" 
              min="0"
              v-model="taskForm.data.reward"
            >
          </div>
          
          <div class="form-group">
            <label for="expireTime">过期时间</label>
            <input 
              type="datetime-local" 
              id="expireTime"
              v-model="taskForm.data.expireTime"
            >
            <small v-if="formattedExpireTime">过期时间：{{ formattedExpireTime }}</small>
          </div>
          
          <div class="form-group address-selector">
            <label for="startAddress">起点地址</label>
            <input 
              type="text" 
              id="startAddress" 
              placeholder="选择起点地址" 
              readonly
              :value="taskForm.data.startAddress"
              @click="showAddressSelector('start')"
            >
            <div class="address-list" v-if="addressSelector.visible && addressSelector.type === 'start'">
              <div 
                v-for="address in addressSelector.addresses" 
                :key="address.id"
                class="address-item"
                @click="selectAddress(address)"
              >
                {{ address.name }}
              </div>
            </div>
          </div>
          
          <div class="form-group address-selector">
            <label for="endAddress">终点地址</label>
            <input 
              type="text" 
              id="endAddress" 
              placeholder="选择终点地址" 
              readonly
              :value="taskForm.data.endAddress"
              @click="showAddressSelector('end')"
            >
            <div class="address-list" v-if="addressSelector.visible && addressSelector.type === 'end'">
              <div 
                v-for="address in addressSelector.addresses" 
                :key="address.id"
                class="address-item"
                @click="selectAddress(address)"
              >
                {{ address.name }}
              </div>
            </div>
          </div>
          
          <div class="form-buttons">
            <button class="cancel-btn" @click="hideTaskForm">取消</button>
            <button class="submit-btn" @click="submitTask">发布任务</button>
          </div>
        </div>
      </transition>
    </div>
    
    <!-- 用户中心内容 -->
    <div v-if="currentPage === 'user'">
      <div class="header">
        <div class="logo" @click="switchToHome">校园跑腿</div>
        <div class="back-btn" @click="switchToHome">
          <i class="fas fa-arrow-left"></i> 返回首页
        </div>
      </div>
      
      <div class="user-center">
        <!-- 用户信息区域 -->
        <div class="user-info">
          <div class="avatar">
            <i class="fas fa-user-circle"></i>
          </div>
          <div class="user-details">
            <h2>{{ user.name }}</h2>
            <p>校园跑腿用户</p>
          </div>
        </div>

        <!-- 功能菜单 -->
        <div class="user-menu">
          <div class="menu-item" @click="gotoMyTasks">
            <i class="fas fa-list"></i>
            <span>我的任务</span>
          </div>
          <div class="menu-item" @click="gotoMyAddresses">
            <i class="fas fa-map-marker-alt"></i>
            <span>地址管理</span>
          </div>
          <div class="menu-item" @click="gotoSettings">
            <i class="fas fa-cog"></i>
            <span>设置</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    // 页面状态管理
    const currentPage = reactive({
      value: 'home' // 'home' 或 'user'
    });

    // 用户信息
    const user = reactive({
      name: '校园用户',
      avatar: 'User',
      addresses: [
        { id: 1, name: '宿舍楼A栋101', type: 'start' },
        { id: 2, name: '教学楼B座201', type: 'start' },
        { id: 3, name: '图书馆3楼', type: 'start' },
        { id: 4, name: '宿舍楼C栋302', type: 'end' },
        { id: 5, name: '行政楼101', type: 'end' },
        { id: 6, name: '体育场东门', type: 'end' }
      ]
    });

    // 任务表单数据
    const taskForm = reactive({
      visible: false,
      data: {
        taskType: 0,
        taskTitle: '',
        taskDesc: '',
        reward: 0,
        expireTime: '',
        startAddress: '',
        endAddress: ''
      }
    });

    // 地址选择器状态
    const addressSelector = reactive({
      visible: false,
      type: '', // 'start' or 'end'
      addresses: computed(() => {
        return user.addresses.filter(addr => addr.type === addressSelector.type);
      })
    });

    // 计算属性：格式化过期时间
    const formattedExpireTime = computed(() => {
      if (!taskForm.data.expireTime) return '';
      const date = new Date(taskForm.data.expireTime);
      return date.toLocaleString('zh-CN');
    });

    // 页面切换方法
    const switchToUserCenter = () => {
      currentPage.value = 'user';
    };

    const switchToHome = () => {
      currentPage.value = 'home';
    };

    // 方法：显示任务表单
    const showTaskForm = () => {
      taskForm.visible = true;
    };

    // 方法：隐藏任务表单
    const hideTaskForm = () => {
      taskForm.visible = false;
      resetForm();
    };

    // 方法：重置表单
    const resetForm = () => {
      taskForm.data = {
        taskType: 0,
        taskTitle: '',
        taskDesc: '',
        reward: 0,
        expireTime: getDefaultExpireTime(),
        startAddress: '',
        endAddress: ''
      };
    };

    // 方法：获取默认过期时间（2小时后）
    const getDefaultExpireTime = () => {
      const now = new Date();
      now.setHours(now.getHours() + 2);
      return now.toISOString().slice(0, 16);
    };

    // 地址选择相关方法
    const showAddressSelector = (type) => {
      addressSelector.type = type;
      addressSelector.visible = true;
    };

    const hideAddressSelector = () => {
      addressSelector.visible = false;
    };

    const selectAddress = (address) => {
      if (addressSelector.type === 'start') {
        taskForm.data.startAddress = address.name;
      } else {
        taskForm.data.endAddress = address.name;
      }
      hideAddressSelector();
    };

    // 用户中心功能方法
    const gotoMyTasks = () => {
      alert('查看我的任务');
    };

    const gotoMyAddresses = () => {
      alert('管理地址信息');
    };

    const gotoSettings = () => {
      alert('进入设置页面');
    };

    // 提交任务
    const submitTask = async () => {
      if (!validateForm()) {
        alert('请填写完整信息');
        return;
      }

      try {
        console.log('提交任务数据:', taskForm.data);
        alert('任务发布成功！');
        hideTaskForm();
      } catch (error) {
        console.error('发布任务失败:', error);
        alert('发布失败，请重试');
      }
    };

    // 表单验证
    const validateForm = () => {
      const { taskTitle, taskDesc, startAddress, endAddress } = taskForm.data;
      return taskTitle && taskDesc && startAddress && endAddress;
    };

    // 初始化
    onMounted(() => {
      resetForm();
    });

    // 点击外部关闭地址选择器
    watch(() => addressSelector.visible, (visible) => {
      if (visible) {
        const handler = (e) => {
          if (!e.target.closest('.address-selector')) {
            hideAddressSelector();
          }
        };
        document.addEventListener('click', handler);
        
        return () => {
          document.removeEventListener('click', handler);
        };
      }
    });

    return {
      currentPage: currentPage.value,
      user,
      taskForm,
      addressSelector,
      formattedExpireTime,
      switchToUserCenter,
      switchToHome,
      showTaskForm,
      hideTaskForm,
      showAddressSelector,
      hideAddressSelector,
      selectAddress,
      gotoMyTasks,
      gotoMyAddresses,
      gotoSettings,
      submitTask
    };
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 头部导航 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  cursor: pointer;
}

.back-btn {
  color: #1890ff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1890ff, #36cfc9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.user-avatar:hover {
  transform: scale(1.1);
}

/* 任务发布按钮 */
.create-task-btn {
  background: linear-gradient(45deg, #1890ff, #36cfc9);
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  transition: all 0.3s;
}

.create-task-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

/* 任务类型选择 */
.task-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.task-type {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-type:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.task-type i {
  font-size: 28px;
  margin-bottom: 10px;
  color: #1890ff;
}

.task-type.active {
  background: #1890ff;
  color: white;
}

.task-type.active i {
  color: white;
}

/* 任务表单 */
.task-form {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #eaeaea;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #1890ff;
  outline: none;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* 地址选择器 */
.address-selector {
  position: relative;
}

.address-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #eaeaea;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.address-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.address-item:hover {
  background: #f5f7fa;
}

.address-item:last-child {
  border-bottom: none;
}

/* 按钮组 */
.form-buttons {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.submit-btn {
  flex: 1;
  background: #1890ff;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #0c7cd5;
}

.cancel-btn {
  flex: 1;
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.cancel-btn:hover {
  background: #e0e0e0;
}

/* 用户中心样式 */
.user-center {
  padding: 10px 0;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  margin-right: 20px;
}

.user-details h2 {
  margin: 0 0 5px 0;
  font-size: 22px;
}

.user-details p {
  color: #666;
  margin: 0;
}

.user-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.menu-item {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu-item i {
  font-size: 28px;
  color: #1890ff;
  margin-bottom: 10px;
  display: block;
}

.menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .task-types, .user-menu {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .container {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .task-types, .user-menu {
    grid-template-columns: 1fr;
  }
  
  .form-buttons {
    flex-direction: column;
  }
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
    